<template>
  <!-- 设备弹窗中的上半部分 -->
  <div class="device-dialog-detail">
    <div class="device-pic">
      <img :src="filterSketch(deviceDetail.device_type_sketch)" alt="">
    </div>
    <div class="device-con">
      <div class="device-title">
        <div class="device-alias">
          {{deviceDetail.alias || '-'}}
        </div>
        <!-- 状态 -->
        <div v-if="deviceStatus(deviceDetail)" class="device-status" :class="deviceStatusMap[deviceDetail.status].className">
          {{deviceStatusMap[deviceDetail.status].txt}}
        </div>
      </div>
      <div class="fromCount">
        <div class="device-form">
          <div class="device-field">
            <div class="key">设备类型</div>
            <div class="val">{{deviceDetail.device_type_name || '-'}}</div>
          </div>

          <div class="device-field">
            <div class="key">型号</div>
            <el-tooltip effect="dark" :content="deviceDetail.model_name" placement="top">
              <div class="val">{{deviceDetail.model_name || '-'}}</div>
            </el-tooltip>
          </div>
          <div class="device-field">
            <div class="key">品牌</div>
            <div class="val">{{deviceDetail.brand_name || '-'}}</div>
          </div>
          <div class="device-field">
            <div class="key">序列号</div>
            <el-tooltip effect="dark" :content="deviceDetail.serial" placement="top">
              <div class="val">{{deviceDetail.serial || '-'}}</div>
            </el-tooltip>
          </div> 
        </div>
        <div class="device-form">
          <div v-for="(sd,index) in deviceDetail.properties" :key="index">
            <div v-if="deviceListstate[sd.name]" class="device-field">
              <div class="key">
                {{deviceListstate[sd.name].txt}}
              </div>
              <div v-if="newsdatas" class="val">
                {{ newsdatas[sd.name] === undefined ? '-' : newsdatas[sd.name] + deviceListstate[sd.name].unit}}
              </div>
              <div v-else class="val">
                  {{'-'}}
                </div>
            </div>
          </div>
          <div v-if="deviceDetail.device_type === '7004'" class="control" @click.stop="controlClicked">
            <img src="@/assets/img/control.png" class="control-ico">
          </div>
        </div>
     </div> 
    </div>
    <air-control v-if="controlVisable" />
  </div>
</template>

<script>
import * as api from '@/api'
import { mapState } from 'vuex'
import { deviceStatus } from '@/utils/tool'
import { deviceStatusMap, deviceListstate} from '@/consts/codeMaps'
import filterSketch from '@/utils/image-path'
export default {

  data() {
    return {
      deviceStatus,
      deviceStatusMap,
      deviceListstate,
      filterSketch,
      newsdatas:{}
    }
  },
  computed: {
    ...mapState(['deviceDetail','controlVisable','modalVisable'])
  },
  watch:{
    modalVisable(val) {
      if (val === true) {
        console.log('打开弹窗')
      }
    },
  },
  methods: {
    // 控制
    controlClicked(){
      this.$store.commit('setState', {
        name: 'controlVisable', 
        value: true
      })
    },
    // 计时任务
    async timeTaskNewdata(val) {
      const serial = this.deviceDetail.serial
      const { code, data } = await api.core.devicedataNewest({
        hubId: this.$route.query.branch_number,
        serial
      })
      if(code === 0) {
        console.log('定时任务新数据',data)
        if(typeof(data.data) == 'string') {
          this.newsdatas = JSON.parse(data.data)
        }else {
          this.newsdatas = data.data
        }
      }
    }
  },
  created() {
    console.log('xiangqing.......',this.deviceDetail)
    this.timeTaskNewdata()
    //开启定时任务
    this.detailTimer = setInterval(() => {
      this.timeTaskNewdata()
    }, 30000)
  },
  beforeDestroy () {
    clearInterval(this.detailTimer)
  },
  mounted() {
    console.log('enable:', this.deviceDetail.enable)
  }
}
</script>

<style lang="stylus">
.device-dialog-detail {
  width: 95%;
  height: getPx(240);
  border-bottom: 1.5px solid $border-color;
  margin: 0  auto;
  display: flex;
  .device-pic {
    flex: 1 getPx(200) 0;
    width: getPx(200);
    height: 100%;
    margin-right: getPx(40);
    img {
      width: 100%;
      height: 100%;
      object-fit: fill;
    }
  }
  .device-con {
    flex: 4;
    padding-top:getPx(40)
    .device-title {
      flexMiddle(flex-start);
    }
    .device-alias {
      font-size: $alias-font-size;
    }
    .device-status {
      width:56px;
      height:20px;
      text-align:center;
      margin-left: 22px;
      font-size: $sm-font-size;
      flexMiddle(center);
      position: relative;
      &:after {
        content: '';
        width: 0;
        height: 0;
        border-top: 10px solid transparent;
        border-left: 10px solid $success;
        border-bottom: 10px solid transparent;
        position: absolute;
        top: 0px;
        right: -10px;
      }
      &.bg-success:after {
        border-left-color: $success;
      }
      &.bg-error:after {
        border-left-color: $error;
      }
      &.bg-warn:after {
        border-left-color: $warn;
      }
      &.bg-grey:after {
        border-left-color: $grey;
      }
    }
    .fromCount {
      width:100%;
      height:getPx(112);
      display:flex;
      justify-content:space-between;
      margin-top:getPx(15);
      .device-form {
        display: flex;
        justify-content:space-between;
        flex-wrap:wrap;
        padding: getPx(20);
        box-sizing:border-box;
        width:50%;
        height:100%;
        .control {
          position:absolute;
          top: getPx(100);
          right:getPx(100);
          cursor: pointer;
          width: getPx(48);
          height: getPx(48);
          border-radius: 50%;
          border:1px solid $air-kz-bg;
          flexMiddle(center);
          .control-ico {
            display: block;
            width: getPx(28);
            height: getPx(28);
          }
        }
        .device-field {
          // flex: 1 50% 0;
          height:getPx(18);
          width: getPx(265.8);
          flexMiddle(flex-start);
          align-items: center;
          margin: getPx(10) 0;
          .key {
            color: $secondary-color;
            font-size: $ty-font-size;
            width:30%;
          }
          .val {
            flex:1;
            color: #fff;
            font-size: $sm-font-size;
            height:getPx(28);
            line-height:getPx(28);
            margin-left: getPx(10);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis
          }
        }
      }
    }
  }
}
</style>